/**
 * @description 历史内容区域
 */
import { useQuasar } from '@teld/q-components';
// import { TIcon as TmIcon } from 't';
import TmIcon from 't/basic/icon';
import { ElTooltip } from 'element-plus';
import { defineComponent, ref, toRefs, watch } from 'vue';
import TmPopover from '../popover';
import subWarning from './subWarning';
import TList from 't/basic/list';
import  TItemSection  from 't/basic/item-section';
import  TItem  from 't/basic/item';
export default defineComponent({
  name: 'QueryPlan',
  components: { TmIcon, subWarning, TmPopover ,TList,TItemSection,TItem,ElTooltip},
  props: {
    plan: Object,
    currectPlan: String,
    modifyPlan: Object,
    pageID: String,
    showSubWarning: {
      default: '1',
      type: String,
    },
    planList: Array,
    planSort: String,
    planIsChange:Boolean,
    showSub:{
      type:Boolean,
      default(){
        return true
      }
    },
    planType:{
      type:Boolean,
      default(){
        return false
      }
    }
  },
  emits: ['operate', 'planChange', 'update:planIsChange'],
  setup(props, { emit }) {
    const { plan, modifyPlan, pageID, showSubWarning, planList, planSort,planIsChange,showSub,planType } =
      toRefs(props);
    const showPopover = ref(false);

    const $q = useQuasar();

    const actions = ref([
      {
        text: $q.lang.queryPlan.dialog.reName,
        code: 'rename',
        icon: (() => {
          return (
            <tm-icon
              name='drive_file_rename_outline'
              style='
                          display: inline-block;

                          font-size: 14px;
                        '
            />
          );
        })(),
      },
      {
        text:  $q.lang.queryPlan.dialog.share,
        code: 'share',
        icon: (() => {
          return (
            <tm-icon name='share' style='font-size: 14px; ' />
          );
        })(),
      },
      {
        text: $q.lang.queryPlan.title.saveAs,
        code: 'saveAs',
        icon: (() => {
          return (
            <i
              class='dx-icon fas icon-t-save-as'
              style='font-size: 14px; '
            ></i>
          );
        })(),
      },
      {
        text: $q.lang.queryPlan.title.setDefault,
        code: 'default',
        icon: (() => {
          return (
            <svg
              class='icon'
              width='14px'
              height='14px'
              viewBox='0 0 1024 1024'
              version='1.1'
              xmlns='http://www.w3.org/2000/svg'
              style=''
            >
              <path
                fill="rgba(0,0,0,0.32)'
                            "
                d='M512 1024c-282.368 0-512-229.632-512-512s229.632-512 512-512 512 229.632 512 512-229.632 512-512 512zM512 70.592A441.92 441.92 0 0 0 70.592 512 441.92 441.92 0 0 0 512 953.408 441.92 441.92 0 0 0 953.408 512 441.92 441.92 0 0 0 512 70.592zM317.76 512a194.24 194.24 0 1 0 388.48 0 194.24 194.24 0 0 0-388.48 0z'
              />
            </svg>
          );
        })(),
      },
      {
        text: $q.lang.queryPlan.title.top,
        code: 'top',
        icon: (() => {
          return (
            <i
              class='dx-icon fas icon-t-align-top-outlined'
              style=' font-size: 14px'
            ></i>
          );
        })(),
      },
      {
        text: $q.lang.queryPlan.title.del,
        code: 'del',
        icon: (() => {
          return (
            <i
            style=' font-size: 14p x'
            class='fas dx-icon icon-t-delete-fill'
          ></i>
          );
        })(),
      },
    ]);
    if (showSubWarning.value) {
      if (plan.value?.WarningID && plan.value.IsAuth) {
        actions.value.unshift({ text: $q.lang.queryPlan.subWarning.cancelSubWarning, code: 'sub', icon: (() => {
          return (
            <i
              style=' font-size: 14p x'
              class='fas dx-icon icon-t-unsubscribe-line'
            ></i>
          );
        })(), });
      } else if (plan.value?.WarningID && !plan.value.IsAuth) {
        actions.value.unshift({ text: $q.lang.queryPlan.subWarning.viewSubWarning, code: 'sub' ,
        icon: (() => {
          return (
            <i
              style=' font-size: 14px'
              class='fas dx-icon icon-t-subscribe-line'
            ></i>
          );
        })(),
      });
      } else if (plan.value.IsAuth && plan.value.PlanRange != 3) {
        actions.value.unshift({
          text: $q.lang.queryPlan.subWarning.subWarning,
          code: 'sub',
          icon: (() => {
            return (
              <i
                style=' font-size: 14px'
                class='fas dx-icon icon-t-subscribe-line'
              ></i>
            );
          })(),
        });
      }
    }
    if(!showSub.value){
      // actions.value=actions.value.filter(item=>item.code!='share')
    }else{
      actions.value.unshift({ text: $q.lang.queryPlan.title.edit, code: 'edit', icon: (() => {
        return (
          <i
            style=' font-size: 14px'
            class='fas dx-icon icon-t-edit-doc-fine'
          ></i>
        );
      })()
    })
    }
    if(planType.value=='1'){
      actions.value=actions.value.filter(item=>item.code!='default')
    }
    watch(() => plan.value?.PlanRange, () => {
      if ((plan.value?.PlanRange==2||plan.value?.PlanRange==3)) {
        if (!actions.value.some(item => item.code == 'shareDetail')) {
          actions.value.push({
            text: $q.lang.queryPlan.dialog.shareDetail,
            code: 'shareDetail',
            icon: (() => {
              return (
                <i   style=' font-size: 14px' class='fas dx-icon icon-t-share-fill'></i>
              );
            })(),
          });
        }
      } else {
        actions.value = actions.value.filter(item => item.code != 'shareDetail');
      }
    }, {
      immediate: true,
      deep:true
    })

    // const showSubWarning = ref(false);

    const onSelect = e => {
      switch (e.code) {
        case 'edit':
          emit('operate', { type: 'edit', plan: plan.value });
          showPopover.value = false;
          break;
        case 'rename':
          emit('operate', { type: 'rename', plan: plan.value });
          showPopover.value = false;
          break;
        case 'saveAs':
          emit('operate', { type: 'saveAs', plan: plan.value });
          showPopover.value = false;
          break;
        case 'share':
          emit('operate', { type: 'share', plan: plan.value });
          showPopover.value = false;
          break;
        case 'default':
          emit('operate', { type: 'default', plan: plan.value });
          break;
        case 'top':
          emit('operate', { type: 'top', plan: plan.value });
          break;
        case 'sub':
          // showSubWarning.value = true;
          emit('operate', { type: 'sub', plan:  JSON.parse(JSON.stringify( plan.value)) });
          showPopover.value = false;
          break;
        case 'del':
          if(showSub.value){
            Funcs.Confirm($q.lang.selectHelper.warning,$q.lang.queryPlan.dialog.deletePlan,async ()=>{
              emit('operate', { type: 'delete', plan: plan.value });
            },()=>{

            },true,{type:'warning'})
          }else{
            emit('operate', { type: 'delete', plan: plan.value });
          }

          // showConfirmDialog({
          //   title: '警告',
          //   message: '确定删除该方案吗？',
          //   ok: true,
          //   cancel: true,
          // }).onOk(async () => {
          //   emit('operate', { type: 'delete', plan: plan.value });
          // });

          break;
        case 'moveUp':
          if (e.disabled) return;
          emit('operate', { type: 'moveUp', plan: plan.value });
          break;
        case 'moveDown':
          if (e.disabled) return;
           emit('operate', { type: 'moveDown', plan: plan.value });

          break;
        case 'shareDetail':
            emit('operate', { type: 'shareDetail', plan: plan.value });
            break;
      }
    };
    const renderPlanType = type => {
      const res = {
        name: '',
        color: '',
      };
      if (type == 0) {
        res.name = $q.lang.queryPlan.dialog.public;
        res.color = '#F4F4F5';
        res.descript = '公共方案';
        return res;
      } else if (type == 1) {
        res.name = $q.lang.queryPlan.dialog.previte;
        res.color = '#FBF6EE';
        res.descript = '私有方案';
        return res;
      } else if (type == 2) {
        res.name = $q.lang.queryPlan.dialog.planToShare;
        res.color = '#F0F2FF';
        res.descript = '共享方案';
        return res;
      } else if (type == 3) {
        res.name = $q.lang.queryPlan.dialog.planByShare;
        res.color = '#FFF2F6';
        res.descript = '分享方案';
        return res;
      }
    };

    watch(
      () => plan.value,
      () => {
        actions.value.forEach(item => {
          const i = plan.value;
          switch (item.code) {
            case 'edit':
              item.disabled = !(
                (i.PlanRange || (!i.PlanRange && i.IsAuth)) &&
                i.PlanRange != 3
              );
              break;
            case 'del':
              item.disabled = !(
                (i.PlanRange || (!i.PlanRange && i.IsAuth)) &&
                i.PlanRange != 3 &&
                !i.IsSystem
              );
              break;
            case 'sub':
              item.disabled = false;

              if (i.WarningID && i.IsAuth) {
                item.text = $q.lang.queryPlan.subWarning.cancelSubWarning;
                item.icon= (() => {
                  return (
                    <i
                      style=' font-size: 14px'
                      class='fas dx-icon icon-t-unsubscribe-line'
                    ></i>
                  );
                })()
              } else if (i.WarningID && !i.IsAuth) {
                item.text = $q.lang.queryPlan.subWarning.viewSubWarning;
                item.icon= (() => {
                  return (
                    <i
                      style=' font-size: 14px'
                      class='fas dx-icon icon-t-subscribe-line'
                    ></i>
                  );
                })()
              } else if (!i.WarningID && i.IsAuth && i.planRange != 3) {
                item.text = $q.lang.queryPlan.subWarning.subWarning;
                item.icon= (() => {
                  return (
                    <i
                      style=' font-size: 14px'
                      class='fas dx-icon icon-t-subscribe-line'
                    ></i>
                  );
                })()
              } else {
                item.disabled = true;
                item.text = $q.lang.queryPlan.subWarning.subWarning;
                item.icon= (() => {
                  return (
                    <i
                      style=' font-size: 14px'
                      class='fas dx-icon icon-t-subscribe-line'
                    ></i>
                  );
                })()
              }
              break;
            case 'top':
              item.text =i.TopTime != '0001-01-01 00:00:00' ? $q.lang.queryPlan.dialog.cancelTop: $q.lang.queryPlan.dialog.topPlan;
              break;
            case 'default':
              item.text = i.IsDefault ? $q.lang.queryPlan.title.cancelDefault : $q.lang.queryPlan.title.setDefault;
              break;
            case 'share':
              item.disabled = !(i.PlanRange == 1 || i.PlanRange == 2);
              break;
            case 'saveAs':
              break;
            case 'rename':
              item.disabled = !(
                (i.PlanRange || (!i.PlanRange && i.IsAuth)) &&
                i.PlanRange != 3
              );
              break;
            case 'moveUp':
              if (planList.value) {
                let firstPlan = planList.value.filter(
                  items =>
                  {
                   if (i.PlanRange == '0') {
                     return items.PlanRange=='0' && i.TopTime == '0001-01-01 00:00:00'
                    } else {
                      return items.PlanRange!='0' && i.TopTime == '0001-01-01 00:00:00'
                    }
                   }
                )[0];
                if (
                  (firstPlan && firstPlan.ID == i.ID) ||
                  planSort.value != 'PlanOrder' ||
                  i.TopTime != '0001-01-01 00:00:00'
                ) {
                  item.disabled = true;
                } else {
                  item.disabled = false;
                }
              }
              break;
            case 'moveDown':
              if (planList.value) {

                let lastPlan = planList.value.filter(
                  items =>{
                    if (i.PlanRange == '0') {
                     return items.PlanRange=='0' && i.TopTime == '0001-01-01 00:00:00'
                    } else {
                      return items.PlanRange!='0' && i.TopTime == '0001-01-01 00:00:00'
                    }
                  }
                );
                lastPlan = lastPlan[lastPlan.length - 1];
                if (
                  (lastPlan && lastPlan.ID == i.ID) ||
                  planSort.value != 'PlanOrder'||i.TopTime != '0001-01-01 00:00:00'
                ) {
                  item.disabled = true;
                } else {
                  item.disabled = false;
                }
              }
              break;
          }
        });
      },
      {
        immediate: true,
        deep: true,
      },
    );
watch(
  () => planSort.value,
  () => {
    actions.value.forEach(item => {
      const i = plan.value;
      switch (item.code) {

        case 'moveUp':
          if (planList.value) {
            let firstPlan = planList.value.filter(
              items => {
                if (i.PlanRange == '0') {
                  return items.PlanRange == '0' && i.TopTime == '0001-01-01 00:00:00'
                } else {
                  return items.PlanRange != '0' && i.TopTime == '0001-01-01 00:00:00'
                }
              }
            )[0];
            if (
              (firstPlan && firstPlan.ID == i.ID) ||
              planSort.value != 'PlanOrder' ||
              i.TopTime != '0001-01-01 00:00:00'
            ) {
              item.disabled = true;
            } else {
              item.disabled = false;
            }
          }
          break;
        case 'moveDown':
          if (planList.value) {

            let lastPlan = planList.value.filter(
              items => {
                if (i.PlanRange == '0') {
                  return items.PlanRange == '0' && i.TopTime == '0001-01-01 00:00:00'
                } else {
                  return items.PlanRange != '0' && i.TopTime == '0001-01-01 00:00:00'
                }
              }
            );
            lastPlan = lastPlan[lastPlan.length - 1];
            if (
              (lastPlan && lastPlan.ID == i.ID) ||
              planSort.value != 'PlanOrder' || i.TopTime != '0001-01-01 00:00:00'
            ) {
              item.disabled = true;
            } else {
              item.disabled = false;
            }
          }
          break;
        }
    });
  },
  {
    immediate: true,
    deep: true,
  },
);
    const render = () => {
      return (
        <div
          class='plan'
          onClick={() => {
            if (plan.value.ID==modifyPlan.value?.ID) return;
            emit('planChange', plan.value);
          }}
          style={'gap:8px; width:100%'}
          onPointerdown={e => {
            e.stopPropagation();
            return false;
          }}
          onTouchstart={e => {
            e.stopPropagation();
            return false;
          }}
          onTouchmove={e => {
            e.stopPropagation();
            return false;
          }}
        >

              <p style={'color:rgba(0,0,0,.8);line-height: 1.5; display: flex;align-items: center;flex:1 1 auto;overflow: hidden;white-space: nowrap; text-overflow: ellipsis;font-size:14px;gap:8px'}>
              {plan.value?.Name}
              <el-tooltip
        class="box-item"
        effect="dark"
        content={renderPlanType(plan.value?.PlanRange)?.descript}
        placement="top-start"
      >
        <span
              class='planType'
              style={
                'color:rgba(0,0,0,.56);background:' +
                (renderPlanType(plan.value?.PlanRange)?.color ?? '') +
                ';border-color:' +
                (renderPlanType(plan.value?.PlanRange)?.color ?? '')
              }
            >
              
              {renderPlanType(plan.value?.PlanRange)?.name}
            </span>
      </el-tooltip>
             
              </p>
              {/* <p >

          </p> */}
          <p style='flex:none'>

            {(() => {
              if (modifyPlan.value && modifyPlan.value.ID == plan.value.ID) {
                return (
                  <span class='planStatus'>
                    <tm-icon name='done' />
                  </span>
                );
              }
            })()}

            {(() => {
              if (plan.value && plan.value.IsDefault&&planType.value!=1) {
                return (
                  <span class='defaultPlan' >
                  {$q.lang.queryPlan.title.default}
                  </span>
                );
              }
              return;
            })()}
            {/* 订阅 */}
            {(() => {
              if (plan.value && plan.value.WarningID) {
                return (
                  <i
                    class='fas icon icon-fassubscribe'

                  ></i>
                );
              }
            })()}

            {(() => {
              if (plan.value?.TopTime != '0001-01-01 00:00:00') {
                return (
                  <svg
                    style='width: 10px; margin-top: 0px;'
                    id='图层_1'
                    fill="i.ID == currentQueryPlan.ID ? ' var(--color)' : ''"
                    data-name='图层 1'
                    xmlns='http://www.w3.org/2000/svg'
                    viewBox='0 0 22.23 32'
                  >
                    <path
                      d='M16,0,4.88,14.55h6.61v8.06h9V14.55h6.61ZM6.46,25.25h2.1v6.66h1.52V25.25h2.09V23.91H6.46Zm9.63-1.52q-3.27.09-3.38,4.2c0,2.66,1.18,4,3.38,4.07s3.28-1.41,3.35-4.07S18.25,23.79,16.09,23.73Zm0,7.1c-1.19,0-1.78-1-1.78-2.9S14.9,25,16.09,25s1.76,1,1.76,2.94S17.26,30.83,16.09,30.83Zm6.59-6.92H20.51v8H22V28.84h1.1a2.3,2.3,0,0,0,2.44-2.47C25.56,24.7,24.61,23.88,22.68,23.91Zm-.23,3.59H22V25.25h.45c1-.12,1.51.26,1.49,1.12S23.47,27.61,22.45,27.5Z'
                      transform='translate(-4.88)'
                    />
                  </svg>
                );
              }
            })()}
            <span class='defaultPlan'>
              <tm-popover
                anchor='top right'
                v-model:show={showPopover.value}
                actions={actions.value}
                onSelect={onSelect}
                styleClass='defaultPlanPopover plan_popover_operate '
                onShow={() => {
                  showPopover.value=true
                }}
                onHide={() => {
                  showPopover.value = false;
                }}
                style='margin:0;padding:0'
                teleport={(() => {
                  return document.body;
                })()}
              >
                {{
                  default: () => {
                    return (
                      <t-list style={`min-width: 108px;padding:8px 0;position:relative;z-index:1111;overflow:hidden;`}>
                        {(() => {
                          let Template = [];
                          actions.value.forEach(item => {
                            // if (!) {
                            Template.push(
                              <t-item clickable style='overflow: hidden;margin-bottom:1px' class="plan_list_item">
                                <t-item-section>
                                  <div
                                    style={
                                      'gap:6px;display:flex;align-items:center;justify-content:start;font-size:12px;' +
                                      (item.disabled
                                        ? 'color:rgba(0,0,0,0.32)'
                                        : '')
                                    }
                                    onClick={() => {
                                      if (item.disabled) return;
                                      showPopover.value = false;
                                      onSelect(item);
                                    }}
                                  >
                                    <span style={'display: flex;align-items: center;'}>{item.icon}</span>
                                    <span>{item.text}</span>
                                  </div>
                                </t-item-section>
                              </t-item>,
                            );
                            // }
                          });
                          return Template;
                        })()}
                      </t-list>
                    );
                  },
                  reference: () => {
                    return (
                      <tm-icon
                        name='more_horiz'
                        style='font-size: 25px'
                        onClick={e => {
                          e.stopPropagation();
                          e.preventDefault();
                          showPopover.value = true;
                        }}
                      />
                    );
                  },
                }}
              </tm-popover>
            </span>
          </p>
        </div>
      );
    };
    return render;
  },
});
